<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 类选择器详解</title>
    <style type="text/css">

        /* 为所有的class 为 important 的设置相关的属性没有指定的元素种类 */
        .important{
            color: red;
        }
        /*  和下面的 * 其实可以省略掉 */
        *.important{

        }

        /* 可以结合元素选择器 指定元素 指定类的颜色 */
        h2.testH2{
            color: #66ff66;
        }

        /* 多类选择器 在一个class 值中 可能包含的词用空格分 */
        .waring{
            font-style: italic;
        }

        /*  多类选择器的结合 同时 包含 important 和 waring 的元素和class的顺序无关 */
        .important.waring{  /* 这个并没有应用于p元素的背景 二者中不要加 空格 不然无法生效在chrome 上*/
            background-color: #0000ff;
        }

        /* .important.urgent 选择器将只匹配 class 属性中包含词 important 和 urgent 的元素。
        因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
        "important urgent warning
        */
        .important.urgent{
           font-size: large;
        }

    </style>
</head>
<body>
    <h1 class="important">This heading is very important.</h1>
    <p class="important">This paragraph is very important.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

    <!--   类和元素选择器结合的情形 -->
    <h2 class="testH2">tong fu </h2>

    <!-- 两个 类选择器的 结合 -->
    <p class="important waring">This paragraph is a very important warning.</p>
    <p class="waring important">This paragraph is a very important warning.</p> <!--  改变顺序并没有影响 -->

    <!-- 匹配 important urgent waring -->
    <p class="important urgent waring">This paragraph is a very important and urgent warning.</p>
</body>
</html>